<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <h1>开始学路由啦，学不会，你就留级吧</h1>
        <router-link tag="button" to="/home">
            home页
        </router-link>
        <router-link tag="button" to="/news">
            news页
        </router-link>
        <hr>
        <!-- 出口 -->
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // /home  /news
        // home组件
        let Home = {
            template:`
                <div>
                    <h1>home页</h1>
                </div>
            `
        }
        // news组件
        let News = {
            template:`
                <div>
                    <h1>新闻页</h1>
                </div>
            `
        }

        // 创建路由对象
        //路由 规则
        const routes = [
           /*  {
                path:"/",
                component:Home
            }, */
            {
                path:"/",
                redirect:"/home"
            },
            {
                path:"/home",
                component:Home
            },
            {
                path:"/news",
                component:News
            }
        ]
        // 路由对象
        const router = new VueRouter({
            routes
        });

        let vm = new Vue({
            el:"#app",
            router
        })
        /* 
        默认 是hash 路由
        根据url hash值得变化 来匹配不同的组件
        url hash值   值 url  # 后面的值
        内部  window.hashchange事件
        */
    </script>
</body>
</html>